<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'
import request, { getServerUrl } from '@/utils/request'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const identifyResult = ref(null)
const previewImage = ref('')
const fileList = ref([])
const imageUrl = ref('') // 存储后端返回的图片URL
const serverUrl = getServerUrl() // 获取服务器基础URL

// 垃圾分类配置
const garbageTypes = {
  // 可回收垃圾
  'clothes': { category: '可回收物', subtype: '衣物类' },
  'glass': { category: '可回收物', subtype: '玻璃类' },
  'metal': { category: '可回收物', subtype: '金属类' },
  'paper': { category: '可回收物', subtype: '纸张类' },
  'plastic': { category: '可回收物', subtype: '塑料类' },
  'shoes': { category: '可回收物', subtype: '鞋袜类' },
  // 有害垃圾
  'electric': { category: '有害垃圾', subtype: '电子产品类' },
  'medical': { category: '有害垃圾', subtype: '医药类' },
  // 厨余垃圾
  'botany': { category: '厨余垃圾', subtype: '植物类' },
  'crop': { category: '厨余垃圾', subtype: '作物类' },
  'food': { category: '厨余垃圾', subtype: '食物类' },
  // 不可回收垃圾
  'trash': { category: '其他垃圾', subtype: '其他垃圾' }
}

// 获取完整图片URL
const getFullImageUrl = (imagePath) => {
  if (!imagePath) return '';
  
  // 如果已经是完整URL，直接返回
  if (imagePath.startsWith('http') || imagePath.startsWith('data:')) {
    return imagePath;
  }
  
  // 否则拼接服务器地址
  return serverUrl + imagePath;
}

// 获取垃圾的主分类
const getGarbageCategory = (type) => {
  return garbageTypes[type]?.category || '未知分类';
}

// 获取垃圾的子分类
const getGarbageSubtype = (type) => {
  return garbageTypes[type]?.subtype || type;
}

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' ||  file.type === 'image/jpg'
  if (!isJpgOrPng) {
    message.error('只能上传JPG/PNG格式图片!')
  }
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    message.error('图片大小不能超过2MB!')
  }
  return isJpgOrPng && isLt2M
}

const handleChange = async(info) => {
  if (info.file.status === 'uploading') {
    loading.value = true
    return
  }
  if (info.file.status === 'done') {
    // 获取图片预览
    getBase64(info.file.originFileObj, (url) => {
      previewImage.value = url
      loading.value = false
    })
  }
}

const customRequest = async ({ file, onSuccess, onError }) => {
  try {
    loading.value = true
    // 创建FormData对象
    const formData = new FormData()
    formData.append('image', file)
    
    // 发送请求到后端
    const res = await request.post('/record/scan', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    

    console.log('识别结果:', res.data);
    
    // 处理识别结果
    if (res.data.code === 200) {
      const data = res.data.data
      const predictedType = data.predicted_class
      const category = getGarbageCategory(predictedType)
      const subtype = getGarbageSubtype(predictedType)
      
      identifyResult.value = {
        type: category,
        subtype: subtype,
        rawType: predictedType,
        confidence: (data.confidence * 100).toFixed(2) + '%',
        time: new Date().toLocaleString(),
        tips: getTips(category)
      }
      
      // 保存后端返回的图片URL
      if (data.image_url) {
        imageUrl.value = data.image_url
        console.log('图片URL:', imageUrl.value)
      }
      
      message.success(res.data.message || '识别成功')
      
      // 保存识别记录
      saveRecord(predictedType, category, subtype)
    } else {
      message.error(res.data.message || '识别失败')
    }
    
    onSuccess(res)
  } catch (error) {
    console.error('上传失败:', error)
    message.error('上传失败: ' + (error.message || '未知错误'))
    onError(error)
  } finally {
    loading.value = false
  }
}

// 保存识别记录到后端
const saveRecord = async (rawType, category, subtype) => {
  try {
    // 获取用户信息
    const user = userStore.user
    
    // 检查用户是否登录
    if (!user || !user.id) {
      message.warning('请先登录后才能保存记录')
      // 显示确认框询问是否跳转到登录页面
      const modal = {
        title: '登录提示',
        content: '需要登录才能保存识别记录，是否立即登录？',
        okText: '去登录',
        cancelText: '取消',
        onOk() {
          router.push('/login')
        }
      }
      // 使用全局方法显示对话框
      try {
        window.$message.info('请先登录')
        window.$modal.confirm(modal)
      } catch (e) {
        console.error('Modal API不可用:', e)
        // 备用方案，直接询问
        if (confirm('需要登录才能保存识别记录，是否立即登录？')) {
          router.push('/login')
        }
      }
      return
    }
    
    // 创建保存记录请求
    const recordData = {
      name: subtype, // 使用子类别作为名称
      category: category, // 垃圾主类别
      recycle_method: getTips(category), // 处理建议
      image: imageUrl.value, // 使用后端返回的图片URL
      user_id: user.id
    }
    
    console.log('保存记录数据:', recordData)
    
    const res = await request.post('/record/save', recordData)
    
    if (res.data.code === 200) {
      message.success(res.data.message || '记录保存成功')
      console.log('记录保存成功:', res.data)
    } else {
      message.error(res.data.message || '记录保存失败')
      console.warn('记录保存失败:', res.data)
      
      // 如果是未登录错误，提示用户登录
      if (res.data.code === 401) {
        try {
          window.$modal.confirm({
            title: '登录提示',
            content: '需要登录才能保存识别记录，是否立即登录？',
            okText: '去登录',
            cancelText: '取消',
            onOk() {
              router.push('/login')
            }
          })
        } catch (e) {
          console.error('Modal API不可用:', e)
          // 备用方案，直接询问
          if (confirm('需要登录才能保存识别记录，是否立即登录？')) {
            router.push('/login')
          }
        }
      }
    }
  } catch (error) {
    console.error('保存记录失败:', error)
    message.error('保存记录失败: ' + (error.message || '未知错误'))
  }
}

// 根据垃圾类型返回处理提示
const getTips = (type) => {
  const tips = {
    '可回收物': '请投放到蓝色垃圾桶，投放前请清理残留物，并保持干燥',
    '有害垃圾': '请投放到红色垃圾桶，投放时请注意安全，确保密闭',
    '厨余垃圾': '请投放到绿色垃圾桶，投放前请去除包装物和非厨余物',
    '其他垃圾': '请投放到灰色垃圾桶，投放前尽量压缩体积'
  }
  return tips[type] || '请按照垃圾分类指南处理';
}

const getBase64 = (img, callback) => {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
</script>

<template>
  <div class="identify-container">
    <h2>垃圾识别</h2>
    
    <a-row :gutter="16">
      <a-col :span="12">
        <a-card title="图片上传">
          <a-upload
            name="file"
            list-type="picture-card"
            class="image-uploader"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            :custom-request="customRequest"
            @change="handleChange"
          >
            <div v-if="previewImage">
              <img :src="previewImage" alt="识别图片" style="width: 100%" />
            </div>
            <div v-else>
              <LoadingOutlined v-if="loading" />
              <PlusOutlined v-else />
              <div class="ant-upload-text">上传图片</div>
            </div>
          </a-upload>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="识别结果" v-if="identifyResult">
          <a-descriptions bordered>
            <a-descriptions-item label="垃圾类型" :span="3">
              <a-tag :color="identifyResult.type === '可回收物' ? 'blue' : 
                              identifyResult.type === '有害垃圾' ? 'red' : 
                              identifyResult.type === '厨余垃圾' ? 'green' : 'orange'">
                {{ identifyResult.type }}
              </a-tag>
              <span style="margin-left: 8px">{{ identifyResult.subtype }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="可信度" :span="3">{{ identifyResult.confidence }}</a-descriptions-item>
            <a-descriptions-item label="识别时间" :span="3">{{ identifyResult.time }}</a-descriptions-item>
            <a-descriptions-item label="处理提示" :span="3">{{ identifyResult.tips }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-empty v-else description="请上传图片进行识别" />
      </a-col>
    </a-row>
    
    <a-row style="margin-top: 20px">
      <a-col :span="24">
        <a-card title="垃圾分类指南">
          <a-collapse>
            <a-collapse-panel key="1" header="可回收物">
              <p>可回收物包括：废纸、塑料、玻璃、金属、衣物和鞋袜类等适宜回收再利用的生活废弃物。</p>
              <p>投放要求：轻投轻放，清洁干燥，避免污染。纸类应保持平整；玻璃要轻放，避免破碎；塑料应清空内容物，清洁后压扁减少体积。</p>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="有害垃圾">
              <p>有害垃圾包括：废电池、废灯管、废药品、废油漆及其容器、电子产品和医药类等对人体健康或自然环境造成直接或潜在危害的生活废弃物。</p>
              <p>投放要求：轻放，确保密封。电池应单独投放；过期药品应保持包装完整；荧光灯管要轻放避免破损；油漆和杀虫剂等应确保密封。</p>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="厨余垃圾">
              <p>厨余垃圾包括：剩菜剩饭、骨头、菜根菜叶、果皮、植物类、作物类和食物类等易腐烂的生活废弃物。</p>
              <p>投放要求：沥干水分，去除包装物。剩饭菜应沥干水分；果壳、蛋壳可直接投放；尽量去除塑料袋等包装物。</p>
            </a-collapse-panel>
            <a-collapse-panel key="4" header="其他垃圾">
              <p>其他垃圾包括：砖瓦陶瓷、渣土、卫生间废纸、纸巾等难以回收的废弃物。</p>
              <p>投放要求：尽量沥干水分，避免污染。烟蒂应完全熄灭；卫生纸等投入前尽量压缩体积；污损纸张不易回收应归入其他垃圾。</p>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.identify-container {
  max-width: 1200px;
  margin: 0 auto;
}
h2 {
  text-align: center;
  margin-bottom: 30px;
}
.image-uploader > .ant-upload {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}
</style>